<template>
<div id="tdtMapDivID" class="chineMap"></div>
  </template>
  
  <script>
  
  export default {
    name: 'Map',
    props: {
    },
    data() {
      return {
      }
    },
    mounted() {
    },
    methods: {
     //绘制地图
    tdMap() {
      let T = window.T;
      this.tdtMap = new T.Map(document.getElementById("tdtMapDivID"));
      //设置显示地图的中心点和级别
      this.tdtMap.centerAndZoom(new T.LngLat(106.00193, 35.705057), 4);
      const site = [
      // 添加更多位置
        {
          latitude: 39.9446467867198,
          longitude: 119.643178592118,
          name: "xxx",
          id: "0",
          icon: require("@/assets/icon.png"),
        },
        {
          latitude: 39.9573002662847,
          longitude: 116.852131675538,
          name: "xxx",
          id: "1",
          icon: require("@/assets/icon.png"),
        },
        
      ];
      //把坐标信息遍历到地图上生成对应的坐标
      site.forEach((item) => {
        var position = new T.LngLat(item.longitude, item.latitude);
        var icon = new T.Icon({
          iconUrl: item.icon, //引入图标
          iconSize: new T.Point(20, 20), //图标可视区域的大小。
        });
        var label = new T.Label({
          text: item.name, //文本标注的内容
          position: position, //文本标注的地理位置
          offset: new T.Point(-100, -30), //文本标注的位置偏移值
        });

        // 创建标注对象
        var marker = new T.Marker(position, {
          icon: icon,
        });
        label.setFontSize(10);
        label.setZindex(9999);
        label.hide();
        var infoWin1 = new T.InfoWindow();
        let datalist = [
          {
            type: "xxx",
            name: "xxx",
            num: 1000,
            unit: "吨",
          },
          {
            type: "xxx",
            name: "xxx",
            num: 1000,
            unit: "吨",
          },
          {
            type: "xx",
            name: "xxx",
            num: 1000,
            unit: "吨",
          },
          // ... more users
        ];
        let content = "";
        for (let i = 0; i < datalist.length; i++) {
          content += `<tr style=" text-align: left;"><td > ${datalist[i].type} </td><td style="padding-left:12px;padding-right:12px">${datalist[i].name}</td><td >${datalist[i].num}${datalist[i].unit}</td></tr>`;
        }

        var sContent = `
        <div >
         <div>${item.name}</div>
          
           <table>
        <thead>
          <tr>
            <th>设施类别</th>
            <th style="padding-left:12px;padding-right:12px">设施名称</th>
            <th >贮存/处置能力</th>
          </tr>
        </thead>
        <div style="width:100%;border-bottom:1px solid #fff"></div>
        <tbody>
          ${content}
        </tbody>
      </table>
        </div>
        `;
        infoWin1.setContent(sContent);
        // 监听标注的鼠标移入事件
        marker.addEventListener("mouseover", (e) => {
          // 显示label
          label.show();
        });

        // 监听标注的鼠标移出事件
        marker.addEventListener("mouseout", function () {
          // 隐藏label
          label.hide();
        });
        marker.addEventListener("click", function () {
          // 鼠标点击显示弹窗
          marker.openInfoWindow(infoWin1);
        });
        this.tdtMap.addOverLay(label);
        this.tdtMap.addOverLay(marker);
      });
    },

    }
  }
  </script>
  
  <style>
  .showRightPanel {
    overflow: hidden;
    position: relative;
    width: calc(100% - 15px);
  }
  </style>
  
  <style lang="scss" scoped>
  .rightPanel-background {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
    background: rgba(0, 0, 0, .2);
    z-index: -1;
  }
  
  .rightPanel {
    width: 100%;
    max-width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
    transition: all .25s cubic-bezier(.7, .3, .1, 1);
    transform: translate(100%);
    background: #fff;
    z-index: 40000;
  }
  
  .show {
    transition: all .3s cubic-bezier(.7, .3, .1, 1);
  
    .rightPanel-background {
      z-index: 20000;
      opacity: 1;
      width: 100%;
      height: 100%;
    }
  
    .rightPanel {
      transform: translate(0);
    }
  }
  
  .handle-button {
    width: 48px;
    height: 48px;
    position: absolute;
    left: -48px;
    text-align: center;
    font-size: 24px;
    border-radius: 6px 0 0 6px !important;
    z-index: 0;
    pointer-events: auto;
    cursor: pointer;
    color: #fff;
    line-height: 48px;
    i {
      font-size: 24px;
      line-height: 48px;
    }
  }
  </style>
  